<script setup lang="ts">
import {ref} from 'vue';
import {useRoute} from 'vue-router';
import {formatNumber} from "~/utils/StringUtils";

import User from "~/api/user"
const user = new User()
import Article from "~/api/Article";
const article = new Article()

const route = useRoute()
const id = ref(route.params.id);
const pageSize = 10;

let userDetail = await user.getDetail(id.value)
const background = () => {
  let url = userDetail.background || 'https://travel-1319165920.cos.ap-shanghai.myqcloud.com/wenan/images/personal-background.png'
  return url.replace('712x128', '1080x464')
}
useSeoMeta({
  title: `${userDetail.nickname}的个人主页 - 小熊文案馆`,
});

const page = ref(route.query.page ? parseInt(route.query.page as string) : 1);

let data = await article.list(page.value, pageSize, id.value)

let random = await article.list(page.value, pageSize, null, true)
const items = [{
  key: 'article',
  label: '文案',
  content: '文案'
}, {
  key: 'random',
  label: '推荐',
  content: ''
}]
</script>

<template>
  <div class="page">
<!--    {{userDetail}}-->
    <div class="flex-1">
      <div
          class="rounded-lg dark:divide-gray-800 ring-1 ring-gray-200 dark:ring-gray-800 shadow bg-white dark:bg-gray-900">
        <div class="rounded-t-lg flex flex-col lg:flex-row lg:items-center lg:justify-between"
             style="height:8rem; overflow: hidden;">
          <img :alt="userDetail.nickname" class="rounded-t-lg" :src="background()">
        </div>
        <div class="flex flex-row items-center justify-between gap-3 px-4 py-5">
          <div class="flex flex-row items-center gap-1.5">
            <div
                class="relative inline-flex items-center justify-center flex-shrink-0 rounded-full h-20 w-20 text-lg"
                style="margin-top: -2rem;"
            ><img
                class="rounded-full h-20 w-20 text-lg"
                :alt="userDetail.nickname"
                :src="userDetail.avatar"></div>
            <div class="text-gray-900 dark:text-white text-base font-semibold">{{ userDetail.nickname }}</div>
          </div>
          <div class="flex flex-col items-center gap-1.5">
            <div class="text-sm font-medium">{{ formatNumber(userDetail.articleCount) }}</div>
            <div class="text-sm font-medium">文案</div>
          </div>
          <div class="flex flex-col items-center gap-1.5">
            <div class="text-sm font-medium">293</div>
            <div class="text-sm font-medium">关注</div>
          </div>
          <div class="flex flex-col items-center gap-1.5">
            <div class="text-sm font-medium">293</div>
            <div class="text-sm font-medium">粉丝</div>
          </div>
        </div>
        <div>
          <p class="p-4 pt-0 text-sm text-gray-500 dark:text-gray-400">{{ userDetail.bio }}</p>
        </div>
      </div>

    </div>
    <!--  <ContentDetail :article="article"/>-->
    <UTabs class="py-4" :items="items">
      <template #item="{ item }">
        <div  v-if="item.key === 'article'" class="pt-2">
          <div v-if="data.list">
            <div v-for="article in data.list" :key="article._id">
              <Content :article="article"/>
            </div>
          </div>
        </div>
        <div  v-if="item.key === 'random'" class="pt-2">
          <div v-if="random.list">
            <div v-for="article in random.list" :key="article._id">
              <Content :article="article"/>
            </div>
          </div>
        </div>
      </template>
    </UTabs>
  </div>
</template>

<style lang="scss" scoped>
.test {
}
</style>
